<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>照片墙</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/an.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<!-- <link rel="stylesheet" type="text/css" href="css/animate.min.css"/> -->
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/xuehua.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.animate1.0.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		@font-face {
			font-family: 'zt';
			src: url(img/锐字云字库行楷体GBK.TTF);
		}

		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.page {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			max-width: 750px;
			background-color: #0b1116;
		}

		.zz {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			background-color: rgba(0, 0, 0, 0.2);

		}

		.page span {
			background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 30%, rgba(0, 0, 0, 0) 100%);
			display: inline-block;
			position: absolute;
			top: 0;
			z-index: 99;
		}

		.tit {
			font-size: 32px;
			font-family: zt;
			color: white;
			position: absolute;
			text-indent: 10px;
			margin: 10px 0;
			font-weight: 900;
		}

		audio {
			opacity: 0;
			position: absolute;
			top: -1000px;
		}

		.main {
			position: absolute;
			top: 0%;
			width: 100%;
			height: auto;
			/* margin-left: 10%; */
			background-color: rgba(0,0,0,0);
		}

		.main ul{
			width: 100%;
			height: 100%;
			position: relative;
		}
		
		.main ul li{
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
			position: relative;
			/* top: 0;
			left: 0; */
			/* display: none; */
		}
		.li1{
			opacity: 0;
			transition: all 1s;
		}
		.li1 .li1_p1{
			position: absolute;
			width: 74%;
			/* height:250px; */
			border-radius: 50%;
			overflow: hidden;
			left: -100%;
			top: 17%;
			transform: rotate(0deg);
			transition: all 2s;
		}
		.li1 img{
			width: 100%;
			height: auto;
			
		}
		.li1_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 20%;
			text-align: center;
			width: 0%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			left: 0;
		}
		
		.li2{
			transform: scale(0.1);
			transition: all 2s;
			left: 0;
		}
		.li2 .li2_p1{
			position: absolute;
			width: 100%;
			height:auto;
			overflow: hidden;
			bottom: -100%;
			transition: all 2s;
			display: none;
		}
		.li2 img{
			width: 100%;
			height: auto;
			
		}
		.li2_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			top: 40%;
			right: -100%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			display: none;
		}	
		.li2_p2{
			/* width: 50px; */
			height: 13%;
			position: absolute;
			left: 35%;
			top: 6%;
			
		}
		.li2_p2 img{
			width: auto;
			height: 100%;
		}
		
		.main ul .li3{
			transition: all 2s;
			left: -100%;
		}
		.li3 .li3_p1{
			position: absolute;
			width: 50%;
			height:auto;
			overflow: hidden;
			top: 20%;
			left: 25%;
			transition: all 2s;
			opacity: 0;
		}
		.li3 img{
			width: 100%;
			height: auto;
			
		}
		.li3_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 10%;
			right: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			opacity: 0;
			/* display: none; */
		}	
		
		.main ul .li4{
			transition: all 2s;
			transform: scale(0) rotate(0);
		}
		.li4 .li4_p1{
			position: absolute;
			width: 80%;
			height:auto;
			overflow: hidden;
			top: 20%;
			left: 10%;
			transition: all 2s;
		}
		.li4 img{
			width: 100%;
			height: auto;
			
		}
		.li4_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 2%;
			right: 0%;
			text-align: center;
			width: 80%;
			transition: all 3s;
			overflow: hidden;
			height: 250px;
			writing-mode:vertical-lr;
			line-height: 56px;
			animation: li4_tex 2s linear 0s infinite;
		}	
		@keyframes li4_tex{
			0%{
				bottom: 2%;
			}
			50%{
				bottom: 6%;
			}
			100%{
				bottom: 2%;
			}
		}
		
		
		.li5{
			
			transition: all 1s;
			right: -100%;
		}
		.li5 .li5_p1{
			position: absolute;
			width: 20%;
			height:auto;
			overflow: hidden;
			top: -100%;
			left: 40%;
			transition: all 2s;
		}
		.li5 img{
			width: 100%;
			height: auto;
			
		}
		.li5_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			top: 1%;
			right: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
		}	
		.li5_p2{
			width: 50%;
			height: auto;
			position: absolute;
			left: 25%;
			bottom: -100%;
			transition: all 2s;
			
		}
		.li5_p2 img{
			width: 100%;
			height: auto;
		}
		
		
		.li6{
			
			transition: all 1s;
			right: 0%;
		}
		.li6 .li6_p1{
			position: absolute;
			width: 88%;
			height:auto;
			overflow: hidden;
			border-radius: 90%;
			bottom: -200%;
			left: 7%;
			transition: all 2s;
		}
		.li6 img{
			width: 100%;
			height: auto;
			
		}
		.li6_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			top: -200%;
			right: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
		}	
		
		.li7{
			
			transition: all 1s;
			right: 0%;
		}
		.li7 .li7_p1{
			position: absolute;
			width: 96%;
			height:auto;
			overflow: hidden;
			/* transform: rotate(-30deg); */
			border-radius: 90%;
			bottom: 25%;
			left: 3%;
			transition: all 2s;
			display: none;
		}
		.li7 img{
			width: 100%;
			height: auto;
			
		}
		.li7_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 10%;
			right: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			display: none;
		}
		
		
		.li8{
			
			transition: all 1s;
			right: 0%;
		}
		.li8 .li8_p1{
			position: absolute;
			width: 50%;
			height:auto;
			overflow: hidden;
			top: 6.5%;
			right: 9%;
			transform: rotate(45deg);
			transition: all 2s;
			display: none;
		}
		.li8 .li8_p2{
			position: absolute;
			width: 50%;
			height:auto;
			overflow: hidden;
			bottom: 6.5%;
			left: 9%;
			transform: rotate(-45deg);
			transition: all 2s;
			display: none;
		}
		.li8 img{
			width: 100%;
			height: auto;
			
		}
		.li8_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 50%;
			right: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			/* display: none; */
		}
		
		.li9{
			
			transition: all 1s;
			right: 0%;
		}
		.li9 .li9_p1{
			position: absolute;
			width: 60%;
			height:auto;
			overflow: hidden;
			top: 15%;
			right: 0%;
			transition: all 2s;
			display: none;
		}
		
		.li9 img{
			width: 100%;
			height: auto;
			
		}
		.li9_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 21%;
			left: 13%;
			text-align: center;
			transition: all 3s;
			overflow: hidden;
			writing-mode: vertical-lr;
			display: none;
		}
		
		
		.li10{
			
			transition: all 1s;
			right: 0%;
		}
		.li10 .li10_p1{
			position: absolute;
			width: 60%;
			height:auto;
			overflow: hidden;
			top: 30%;
			right: 20%;
			transition: all 2s;
			transform: rotate(45deg) !important;
			display: none;
		}
		.li10 .li10_p1 img{
			transform: rotate(-45deg) !important;
			width: 150%;
			height: auto;
			position: absolute;
			top: -60%;
			left: -27%;
		}
		.li10 img{
			width: 100%;
			height: auto;
			
		}
		.li10_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 10%;
			left: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			/* writing-mode: vertical-lr; */
			display: none;
		}
		
		
		.li11{
			
			transition: all 1s;
			right: 0%;
		}
		.li11 .li11_p1{
			position: absolute;
			width: 90%;
			height:auto;
			overflow: hidden;
			top: 10%;
			left: 5%;
			transition: all 2s;
			display: none;
		}
		
		.li11 img{
			width: 100%;
			height: auto;
			
		}
		.li11_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 10%;
			left: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			/* writing-mode: vertical-lr; */
			display: none;
		}
		
		
		.li12{
			
			transition: all 1s;
			right: 0%;
		}
		.li12 .li12_p1{
			position: absolute;
			width: 85%;
			height:auto;
			overflow: hidden;
			top: 16%;
			left: 8%;
			transition: all 2s;
			display: none;
		}
		
		.li12 img{
			width: 100%;
			height: auto;
			
		}
		.li12_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 10%;
			left: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			/* writing-mode: vertical-lr; */
			display: none;
			
		}
		
		
		.li13{
			
			transition: all 1s;
			right: 0%;
		}
		.li13 .li13_p1{
			position: absolute;
			width: 60%;
			height:auto;
			overflow: hidden;
			bottom: 10%;
			left: 4%;
			transition: all 2s;
			display: none;
		}
		
		.li13 img{
			width: 100%;
			height: auto;
			
		}
		.li13_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 20%;
			right: 10%;
			text-align: center;
			/* width: 100%; */
			transition: all 3s;
			overflow: hidden;
			/* white-space: normal;
			height: 30px; */
			writing-mode: vertical-lr;
			display: none;
		}
		
		.li14{
			
			transition: all 1s;
			right: 0%;
		}
		.li14 .li14_p1{
			position: absolute;
			width: 90%;
			height:auto;
			overflow: hidden;
			top: 10%;
			left: 5%;
			transition: all 2s;
			display: none;
			opacity: 0.8;
			animation: li14 4s linear 0s infinite;
		}
		@keyframes li14{
			0%{transform: scale(0.8);opacity: 0.8;}
			to{transform: scale(1.1);opacity: 1;}
		}
		.li14 img{
			width: 100%;
			height: auto;
			
		}
		.li14_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 10%;
			right: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			/* writing-mode: vertical-lr; */
			display: none;
		}
		
		
		.li15{
			
			transition: all 1s;
			right: 0%;
		}
		.li15 .li15_p1{
			position: absolute;
			width: 90%;
			height:auto;
			overflow: hidden;
			top: 10%;
			left: 5%;
			transition: all 2s;
			display: none;
			
		}
		
		.li15 img{
			width: 100%;
			height: auto;
			
		}
		.li15_tit{
			position: absolute;
			font-size: 24px;
			font-family: zt;
			color: white;
			bottom: 10%;
			right: 0%;
			text-align: center;
			width: 100%;
			transition: all 3s;
			overflow: hidden;
			white-space: normal;
			height: 30px;
			/* writing-mode: vertical-lr; */
			display: none;
		}
	</style>
	<body>
		<div class="page">
			<div class="zz"></div>
			<!-- <div class="tit">
				我们一家人
			</div> -->
			<audio src="./img/zhaopain/Sakura%20Tears.mp3" controls="controls" autoplay="autoplay" loop="loop">
			</audio>
			<div class="main">
				<ul>
					<li class="li1" v-show="ind==0">
						<img src="img/zhaopain/zp1.jpg" >
						<p class="li1_p1">
							<img src="img/zhaopain/zp2_1.jpg" >
						</p>
						<p class="li1_tit">落霞与孤鹜齐飞，秋水共长天一色</p>
					</li>
					<li class="li2" v-show="ind==1">
						<img src="img/zhaopain/zp2.jpg" >
						
						<p class="li2_p1">
							<img src="img/zhaopain/zp1_1.jpg" >
						</p>
						<p class="li2_p2">
							<img src="img/zhaopain/zp26_1.jpg" >
						</p>
						<p class="li2_tit">人烟寒橘柚，秋色老梧桐</p>
					</li>
					<li class="li3" v-show="ind==2">
						<img src="img/zhaopain/zp3.jpg" >
						
						<p class="li3_p1">
							<img src="img/zhaopain/zp4_1.jpg" >
						</p>
						
						<p class="li3_tit">林下漏月光，疏疏如残雪</p>
					</li>
					<li class="li4" v-show="ind==3">
						<img src="img/zhaopain/zp4.jpg" >
						
						<p class="li4_p1">
							<img src="img/zhaopain/zp9_1.jpg" >
						</p>
						<p class="li4_tit">
							窗间梅熟落蒂，
							&nbsp;&nbsp;&nbsp;&nbsp;墙下笋成出林。
							连雨不知春去，
							&nbsp;&nbsp;&nbsp;&nbsp;一晴方觉夏深。
						</p>
					</li>
					<li class="li5" v-show="ind==4">
						<img src="img/zhaopain/zp5.jpg" >
						
						<p class="li5_p1">
							<img src="img/zhaopain/zp15_1.jpg" >
						</p>
						<p class="li5_p2">
							<img src="img/zhaopain/zp16_1.jpg" >
						</p>
						<p class="li5_tit">
							浪花有意千重雪，桃李无言一队春
						</p>
					</li>
					<li class="li6" v-show="ind==5">
						<img src="img/zhaopain/zp6.jpg" >
						
						<p class="li6_p1">
							<img src="img/zhaopain/zp7_1.jpg" >
						</p>
						<p class="li6_tit">
							燕子不归春事晚，一汀烟雨杏花寒
						</p>
					</li>
					
					<li class="li7" v-show="ind==6">
						<img src="img/zhaopain/zp9.jpg" >
						
						<p class="li7_p1">
							<img src="img/zhaopain/zp10_1.jpg" >
						</p>
						<p class="li7_tit">
							今夜偏知春气暖，虫声新透绿窗纱
						</p>
					</li>
					
					<li class="li8" v-show="ind==7">
						<img src="img/zhaopain/zp10.jpg" >
						
						<p class="li8_p1">
							<img src="img/zhaopain/zp12_1.jpg" >
						</p>
						<p class="li8_p2">
							<img src="img/zhaopain/zp_13_1.jpg" >
						</p>
						<p class="li8_tit">
							况是青春日将暮，桃花乱落如红雨
						</p>
					</li>
					<li class="li9" v-show="ind==8">
						<img src="img/zhaopain/zp11.jpg" >
						
						<p class="li9_p1">
							<img src="img/zhaopain/zp8_1.jpg" >
						</p>
						
						<p class="li9_tit">
							砌下落花风起，罗衣特地春寒
						</p>
					</li>
					<li class="li10" v-show="ind==9">
						<img src="img/zhaopain/zp12.jpg" >
						
						<p class="li10_p1">
							<img src="img/zhaopain/zp23_1.jpg" >
						</p>
						
						<p class="li10_tit">
							我是梦中传彩笔，欲书花叶寄朝云
						</p>
					</li>
					<li class="li11" v-show="ind==10">
						<img src="img/zhaopain/zp13.jpg" >
						
						<p class="li11_p1">
							<img src="img/zhaopain/zp20_1.jpg" >
						</p>
						
						<p class="li11_tit">
							别有玉盘承露冷，无人起就月中看
						</p>
					</li>
					<li class="li12" v-show="ind==11">
						<img src="img/zhaopain/zp14.jpg" >
						
						<p class="li12_p1">
							<img src="img/zhaopain/zp6_1.jpg" >
						</p>
						
						<p class="li12_tit">
							细雨湿衣看不见，闲花落地听无声
						</p>
					</li>
					<li class="li13" v-show="ind==12">
						<img src="img/zhaopain/zp15.jpg" >
						
						<p class="li13_p1">
							<img src="img/zhaopain/zp14_1.jpg" >
						</p>
						
						<p class="li13_tit">
							桃李春风一杯酒，江湖夜雨十年灯
						</p>
					</li>
					<li class="li14" v-show="ind==13">
						<img src="img/zhaopain/zp17.jpg" >
						
						<p class="li14_p1">
							<img src="img/zhaopain/zp18_1.jpg" >
						</p>
						
						<p class="li14_tit">
							雨中黄叶树，灯下白头人
						</p>
					</li>
					<li class="li15" v-show="ind==14">
						<img src="img/zhaopain/zp18.jpg" >
						
						<p class="li15_p1">
							<img src="img/zhaopain/zp19_1.jpg" >
						</p>
						
						<p class="li15_tit">
							人间有味是清欢
						</p>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		

		new Vue({
			el: ".page",
			data: {
				imgs: [
					"img/invit/ss.png",
					"img/invit/22.png",
					"img/invit/sss.png",
					"img/invit/you.png",
					"img/invit/zuo.png"
				],
				ind: 0
			},
			mounted() {
				let this_ = this
				let li1_p1w = $('.li1_p1').width()
				
				$('.li1').css({
					'opacity':'1'
				})
				$('.li1_p1').css({
					'height' : li1_p1w+'px',
					'left':'13%',
				})
				
				$('.li1_tit').css({
					'width':'100%',
					'left': '0%',
				})
				
				setTimeout(function(){
					$('.li1').css({
						'opacity':'0'
					})
					$('.li1_p1').css({
						'height' : li1_p1w+'px',
						'left':'-100%',
					})
					
					$('.li1_tit').css({
						'left':'-100%',
					})
				},3000)
				setTimeout(function(){
					this_.ind = 1
				},4000)
				setTimeout(function(){
					$('.li2').css({
						'transform': 'scale(1)'
					})
				},4100)
				setTimeout(function(){
					
					$('.li2_p1').css({
						'display':'block'
					})
					
					$('.li2_tit').css({
						'display':'block'
					})
				},6100)
				setTimeout(function(){
					
					$('.li2_p1').css({
						'bottom' : '0%',
					})
					
					$('.li2_tit').css({
						'right':'0%',
					})
				},6200)
				setTimeout(function(){
					
					$('.li2').css({
						'left':'-100%'
					})
					
				},9200)
				
				setTimeout(function(){
					this_.ind = 2
					
					
				},11200)
				setTimeout(function(){
					
					$('.li3').css({
						'left':'0%'
					})
				},11300)
				setTimeout(function(){
					
					$('.li3_p1').css({
						'opacity':'0.8'
					})
					$('.li3_tit').css({
						'opacity':'1'
					})
				},13300)
				setTimeout(function(){
					$('.li3').css({
						'opacity':'0'
					})
					
				},16300)
				setTimeout(function(){
					this_.ind = 3
				},18300)
				setTimeout(function(){
					$('.li4').css({
						'transform': 'scale(1) rotate(720deg)'
					})
				},18400)
				setTimeout(function(){
					$('.li4').css({
						'transform': 'scale(0) rotate(0deg)'
					})
				},24400)
				setTimeout(function(){
					this_.ind = 4
				},26400)
				setTimeout(function(){
					$('.li5').css({
						'right':'0%'
					})
				},26500)
				setTimeout(function(){
					$('.li5_p1').css({
						'top':'17%'
					})
					$('.li5_p2').css({
						'bottom':'7%'
					})
				},27500)
				setTimeout(function(){
					$('.li5_p1').css({
						'top':'-100%'
					})
					$('.li5_p2').css({
						'bottom':'-100%'
					})
				},32500)
				setTimeout(function(){
					$('.li5').css({
						'right':'-100%'
					})
				},33500)
				setTimeout(function(){
					this_.ind = 5
					$('.li6').addClass('animate__animated animate__slideInRight')
				},34500)
				
				setTimeout(function(){
					let li6_w = $('.li6_p1').width();
					$('.li6_p1').css({
						'height':li6_w+'px',
						'bottom':'30%'
					})
					$('.li6_tit').css({
						'top':'80%'
					})
				},35500)
				setTimeout(function(){
					let li6_w = $('.li6_p1').width();
					$('.li6_p1').css({
						'height':li6_w+'px',
						'bottom':'-200%'
					})
					$('.li6_tit').css({
						'top':'-200%'
					})
					
				},38500)
				setTimeout(function(){
					$('.li6').removeClass('animate__animated animate__slideInRight')
					$('.li6').addClass('animate__animated animate__fadeOutLeft')
				},40500)
				setTimeout(function(){
					this_.ind = 6
					$('.li7').addClass('animate__animated animate__slideInRight')
					// let li7_w = $('.li7_p1').width();
					// $('.li7_p1').css({
					// 	'height':li7_w+'px',
					// })
				},41500)
				setTimeout(function(){
					let li7_w = $('.li7_p1').width();
					$('.li7_p1').css({
						'display':'block',
						'height':li7_w+'px',
					})
					$('.li7_tit').css({
						'display':'block'
					})
					$('.li7_p1').addClass('animate__animated animate__flipInY')
					$('.li7_tit').addClass('animate__animated animate__flipInX')
				},42000)
				setTimeout(function(){
					$('.li7_p1').removeClass('animate__animated animate__flipInY')
					$('.li7_tit').removeClass('animate__animated animate__flipInX')
					$('.li7_p1').addClass('animate__animated animate__rotateOutUpRight')
					$('.li7_tit').addClass('animate__animated animate__rotateOutDownLeft')
				},44000)
				setTimeout(function(){
					$('.li7').removeClass('animate__animated animate__slideInRight')
					$('.li7').addClass('animate__animated animate__rotateOut')
				},44500)
				setTimeout(function(){
					this_.ind = 7
					$('.li8').addClass('animate__animated animate__flipInY')
				},45000)
				
				setTimeout(function(){
					
					let li8_w = $('.li8_p1').width();
					$('.li8_p1').css({
						'display':'block',
						'height':li8_w+'px',
					})
					$('.li8_p2').css({
						'display':'block',
						'height':li8_w+'px',
					})
					$('.li8_p1').addClass('animate__animated animate__bounceInLeft')
					$('.li8_p2').addClass('animate__animated animate__bounceInRight')
				},45500)
				
				setTimeout(function(){
					$('.li8').removeClass('animate__animated animate__flipInY')
					$('.li8').addClass('animate__animated animate__flipOutY')
					$('.li8_p1').removeClass('animate__animated animate__bounceInLeft')
					$('.li8_p2').removeClass('animate__animated animate__bounceInRight')
					$('.li8_p1').addClass('animate__animated animate__bounceOutDown')
					$('.li8_p2').addClass('animate__animated animate__bounceOutUp')
				},48500)
				setTimeout(function(){
					this_.ind = 8
					$('.li9').addClass('animate__animated animate__bounceInDown')
				},49000)
				setTimeout(function(){
					$('.li9_p1').show()
					$('.li9_tit').show()
					$('.li9_p1').addClass('animate__animated animate__backInRight')
					$('.li9_tit').addClass('animate__animated animate__fadeInDownBig')
				},50000)
				setTimeout(function(){
					$('.li9_p1').removeClass('animate__animated animate__backInRight')
					$('.li9_tit').removeClass('animate__animated animate__fadeInDownBig')
					$('.li9_p1').addClass('animate__animated animate__fadeOutTopRight')
					$('.li9_tit').addClass('animate__animated animate__fadeOutBottomLeft')
				},53000)
				setTimeout(function(){
					$('.li9').removeClass('animate__animated animate__bounceInDown')
					$('.li9').addClass('animate__animated animate__fadeOutUp')
				},54000)
				setTimeout(function(){
					this_.ind = 9
					$('.li10').addClass('animate__animated animate__bounceInUp')
				},55000)
				setTimeout(function(){
					let li10_w = $('.li10_p1').width();
					$('.li10_p1').css({
						'display':'block',
						'height':li10_w+'px',
					})
					$('.li10_tit').show()
					$('.li10_p1').addClass('animate__animated animate__zoomIn')
					$('.li10_tit').addClass('animate__animated animate__zoomIn')
				},56000)
				setTimeout(function(){
					
					$('.li10_p1').removeClass('animate__animated animate__zoomIn')
					$('.li10_tit').removeClass('animate__animated animate__zoomIn')
					$('.li10_p1').addClass('animate__animated animate__flipOutX')
					$('.li10_tit').addClass('animate__animated animate__flipOutX')
				},59000)
				setTimeout(function(){
					
					$('.li10').removeClass('animate__animated animate__bounceInUp')
					$('.li10').addClass('animate__animated animate__backOutDown')
				},60000)
				
				setTimeout(function(){
					this_.ind = 10
					$('.li11').addClass('animate__animated animate__fadeIn')
				},61000)
				setTimeout(function(){
					
					$('.li11_p1').css({
						'display':'block',
					})
					$('.li11_tit').show()
					$('.li11_p1').addClass('animate__animated animate__bounceIn')
					$('.li11_tit').addClass('animate__animated animate__zoomIn')
				},62000)
				setTimeout(function(){
					
					$('.li11_p1').removeClass('animate__animated animate__bounceIn')
					$('.li11_tit').removeClass('animate__animated animate__zoomIn')
					$('.li11_p1').addClass('animate__animated animate__flipOutX')
					$('.li11_tit').addClass('animate__animated animate__flipOutX')
				},65000)
				setTimeout(function(){
					
					$('.li11').removeClass('animate__animated animate__fadeIn')
					$('.li11').addClass('animate__animated animate__backOutDown')
				},66000)
				setTimeout(function(){
					this_.ind = 11
					
					$('.li12').addClass('animate__animated animate__fadeIn')
				},67000)
				setTimeout(function(){
					$('.li12_p1').show()
					$('.li12_tit').show()
					$('.li12_p1').addClass('animate__animated animate__backInLeft')
					$('.li12_tit').addClass('animate__animated animate__backInRight')
				},68000)
				setTimeout(function(){
					$('.li12_p1').removeClass('animate__animated animate__backInLeft')
					$('.li12_tit').removeClass('animate__animated animate__backInRight')
					$('.li12_p1').addClass('animate__animated animate__backOutLeft')
					$('.li12_tit').addClass('animate__animated animate__backOutRight')
				},71000)
				setTimeout(function(){
					$('.li12').removeClass('animate__animated animate__fadeIn')
					$('.li12').addClass('animate__animated animate__fadeOut')
				},72000)
				
				
				setTimeout(function(){
					this_.ind = 12
					
					$('.li13').addClass('animate__animated animate__fadeInTopRight')
				},73000)
				setTimeout(function(){
					$('.li13_p1').show()
					$('.li13_tit').show()
					let li13_w = $('.li13_p1').width();
					$('.li13_p1').css({
						'height':li13_w+'px',
					})
					$('.li13_p1').addClass('animate__animated animate__backInLeft')
					$('.li13_tit').addClass('animate__animated animate__backInRight')
				},74000)
				setTimeout(function(){
					$('.li13_p1').removeClass('animate__animated animate__backInLeft')
					$('.li13_tit').removeClass('animate__animated animate__backInRight')
					$('.li13_p1').addClass('animate__animated animate__backOutLeft')
					$('.li13_tit').addClass('animate__animated animate__backOutRight')
				},77000)
				setTimeout(function(){
					$('.li13').removeClass('animate__animated animate__fadeInTopRight')
					$('.li13').addClass('animate__animated animate__fadeOutBottomLeft')
				},78000)
				
				
				setTimeout(function(){
					this_.ind = 13
					
					$('.li14').addClass('animate__animated animate__fadeInTopRight')
				},79000)
				setTimeout(function(){
					$('.li14_p1').show()
					$('.li14_tit').show()
					$('.li14_p1').addClass('animate__animated animate__fadeIn')
					$('.li14_tit').addClass('animate__animated animate__backInRight')
				},80000)
				setTimeout(function(){
					$('.li14_p1').removeClass('animate__animated animate__fadeIn')
					$('.li14_tit').removeClass('animate__animated animate__backInRight')
					$('.li14_p1').addClass('animate__animated animate__fadeOut')
					$('.li14_tit').addClass('animate__animated animate__backOutRight')
				},83000)
				setTimeout(function(){
					$('.li14').removeClass('animate__animated animate__fadeInTopRight')
					$('.li14').addClass('animate__animated animate__fadeOutBottomLeft')
				},84000)
				
				
				setTimeout(function(){
					this_.ind = 14
					
					$('.li15').addClass('animate__animated animate__fadeInBottomLeft')
				},85000)
				setTimeout(function(){
					$('.li15_p1').show()
					$('.li15_tit').show()
					$('.li15_p1').addClass('animate__animated animate__fadeInTopLeft')
					$('.li15_tit').addClass('animate__animated animate__fadeInBottomRight')
				},86000)
				setTimeout(function(){
					$('.li15_p1').removeClass('animate__animated animate__fadeInTopLeft')
					$('.li15_tit').removeClass('animate__animated animate__fadeInBottomRight')
					$('.li15_p1').addClass('animate__animated animate__fadeOutTopLeft')
					$('.li15_tit').addClass('animate__animated animate__fadeOutBottomRight')
				},89000)
				setTimeout(function(){
					$('.li15').removeClass('animate__animated animate__fadeInBottomLeft')
					$('.li15').addClass('animate__animated animate__fadeOutBottomLeft')
				},90000)
			}
		})
		xuehua('.page', 60)
	</script>
	
</html>
